<template>
<!--头部导航-->
<div>
  <div :style="background" class="bgBackground">
    <!--  搜索-->
  <div style="float: right;margin-top: 40px;margin-right: 15px">
    <van-icon  name="search" size="30px" @click="sea()"/>
  </div>
<!-- 购物车-->
  <div style="float: right;margin-top: 40px;margin-right: 40px">
    <van-icon name="shopping-cart-o" size="30px" @click="ret()" />
  </div>
<!--    首页跳转-->
  <div style="float: left;margin-left: 30px; margin-top: 5px ;">
    <router-link to='/home' ><h1>首页</h1></router-link>
  </div>
  </div>
   </div>
<!--商品分类-->
  <div style="margin-top: 20px">
    <van-grid square>
      <van-grid-item v-for="m in meun" :key="m" @click="gdc(m.id)">
        <img  class="mal-dh-imgs" :src="m.img"/>
        <p>{{ m.name }}</p>
      </van-grid-item>
    </van-grid>
  </div>
<!--  优惠券-->
  <div>
      <img  src="../assets/images/mall-yhq.jpg" class="img1"  @click="btn1()"/>
  </div>
<!--  限时秒杀-->
  <div style="float: left;">
   <div style="float: left;margin-left: 10px"> <h1>限时秒杀</h1></div>
   <div style="float: left;margin-left: 30px;margin-top: 35px ">
    <van-count-down :time="time">
      <template #default="timeData">
        <span class="block">{{ timeData.hours }}</span>
        <span class="colon">:</span>
        <span class="block">{{ timeData.minutes }}</span>
        <span class="colon">:</span>
        <span class="block">{{ timeData.seconds }}</span>
      </template>
    </van-count-down>
   </div>
  </div>
  <div style="float: left;margin-left: 20px;margin-top: 10px" >
    <img  src="../assets/images/mall-ms.jpg" class="mal-ms-imgs" @click="shooping()">
  </div>
<!--  商品展示-->
  <div style="clear: both">
  <div class="sp-lx" v-for="s in gods" :key="s" >
    <img  class="mal-gd-imgs" :src="s.img" @click="shooping(s.id)" >
    <div>
      <label class="sp-tp-na" >{{s.name}}</label ><br>
      <span style="color: #ee0a24;font-size: 9px">商品价格:￥{{ s.discount }}</span >
      <span style="color: #8d8c8c;text-decoration: line-through;margin-left: 10px;font-size: 9px">￥{{ s.price}}</span ><br>
      <span style="color: orangered;font-size: 10px;margin-right: 40px">商品销量:{{s.sale}}</span>
      <span style="color: lightslategrey;font-size: 10px">库存:{{s.room}}</span>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  name: "MallView",
  data() {
    return {
            time:86400000,
      background: {
        // 背景图片地址
        backgroundImage: 'url(' + require('../assets/images/mall-top1.webp') + ')',
        backgroundSize: 'cover',
      },
      kalus: 0,
      meun: [
        {
          id:1,
          name: "家庭器械",
          img: require("../assets/images/mall-dh1.jpg")
        },
        {
          id:2,
          name: "运动手环",
          img: require("../assets/images/mall-dh2.jpg")
        }, {
          id:3,
          name: "运动装备",
          img: require("../assets/images/mall-dh3.jpg")
        }, {
          id:4,
          name: "健康食品",
          img: require("../assets/images/mall-dh4.jpg")
        }
      ],

      gods:[],
      cart:{
        mid:"",
        num:""
      },
    }

    },mounted() {
    this.axios.get("/api/mall/mallall.do").then(m=>{
      if (m.data.code==200) {
        //console.log(m.data.data)
        this.gods=m.data.data;
      }
    })
  }
  ,methods:{
    btn1(){
      this.$toast("成功领取！");
    },
    ret(){
      this.$router.push("/cart")
    },
    shooping(id) {

      this.cart.mid=id
      this.cart.num+=1;

      this.axios.post("api/mallcart/add.do",this.cart).then((r)=>{
        if (r.data.code==200) {
          this.$toast('加入购物车成功')
        }else {
          this.$toast('加入购物车失败')
        }
      })
    },
    //跳转
    gdc(id){
      this.$router.push({name:'shoptype',query:{id:id}})
    },
    sea(){
      this.$router.push("/search")
    }
  }
}
</script>

<style scoped>
.bgBackground{
  width:100%;
  height:260px;
}
.sp-lx{
  width: 40%;
  border-radius: 5px;
  margin-right: 10px;
  margin-top:20px;
  margin-left: 20px;
  float: left;
  border:1px solid #DCDCDC;
  margin-bottom: 50px;
}
a{
  color: black;
}
.mal-dh-imgs {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.mal-ms-imgs{
  width: 200px;
  height: 60px;
  border-radius: 10px;
}
.mal-gd-imgs{
  width: 180px;
  height: 200px;
}
.sp-tp-na {
  font-size: 12px;
  font-weight: bold;
}
.img1
{
  width: 94%;
  margin-left: 3%;
  margin-right: 3%;
  height: 100px;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
.mal-gd-imgs{
  width: 180px;
  height: 200px;
  border-radius: 5px;
}
</style>